<template>
<!-- <div :class="[NightClass,DayClass]"> 这样子会导致两个样式同时触发 -->
<!-- 通过isNight状态，如果isNight为true，则应用NightClass类名；如果为false，则应用DayClass类名 -->
<div :class="[isNight? NightClass : DayClass]">

<!-- 显示一个图片，其源由imagecontext数据属性决定。如果图片加载失败，会触发handleImageError方法。 -->
<img :src="imagecontext" alt="当前状态" @error="handleImageError" class="Images">

<!-- 一个可点击的<h1>元素，显示的文本根据isNight的值动态变化。点击这个元素会触发toggleClass方法。 -->
<h1 @click="toggleClass">{{isNight ? '这是夜晚':'这是白天'}}</h1> 

<!-- 其样式由textstyle计算属性决定，显示的文本由textContext计算属性决定。 -->
<h3 :style="textstyle">
    {{ textContext }}</h3>

</div>
</template>

<script>
// 获取图片
import dayimage from '../../public/day.png'
import nightimage from '../../public/night.jpg'
export default{
    data(){
        //获取当前时间
        const Hour = new Date().getHours();
        return{
            NightClass:'NightClass',
            DayClass:"DayClass",
            // 根据时间设置进入时夜间或日间
            isNight: Hour >18 || Hour<6,
            // 根据时间显示不同图片
            imagecontext: Hour > 18 || Hour < 6 ? nightimage : dayimage
        }
    },
    methods:{
        toggleClass(){
            //当被调用时，切换isNight的值。如果原本为true则改为false，反之一样
            this.isNight =! this.isNight;
            // 如果不是夜晚，则给页面中的某个<div>元素添加fromNightToDay类名；
            if (!this.isNight) {
                this.imagecontext=dayimage; //切换白天图片
<<<<<<< HEAD
                //document.querySelector('div').classList.add('fromNightToDay');
=======
               //document.querySelector('div').classList.add('fromNightToDay');
>>>>>>> 7b40162a212f0daf166ce8c6b302c801ba5ee6b3
            }
            // 如果是夜晚，则移除这个类名。--因为本身就写了夜晚转白天的过度
            else{
                this.imagecontext=nightimage;//切换夜晚图片
                //document.querySelector('div').classList.remove('fromNightToDay');
            }
        },
        handleImageError(event){
            // 如果取不到图片，则取新的地址，在控制台打印错误原因
            this.imagecontext= require('@/assets/night.jpg');
            console.log('图片加载失败'+event);
        }
    },
    computed:{
        //文字显示
        textContext(){
            return this.isNight?'这是夜晚，希望你能见到炽热的太阳。':'这是白天，夜晚很快就到了，请珍惜为数不多的日光。'
        },
        //文字颜色内联修改
        textstyle(){
            return this.isNight?{color:'#E7FFA1'}:{color:'#6A7DC7'}
        }
    }
}
</script>

<style>
    .NightClass{
        margin: 0;
        /* position: fixed;会生成绝对定位的元素，该元素的位置是相对于浏览器窗口进行定位的，
        这意味着即使页面发生滚动，使用 position: fixed; 定位的元素也会始终保持在屏幕的固定位置。 */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        height: 100%;
        background-color: black;
        margin-top: 0%;
        transition:background-color 2s linear;/* 添加过度效果*/
    }
    .NightClass h1{
        color: rgb(rgb(1rgb(59, 148, 59)5, 55), rgb(54, 205, 54), rgb(22, 22, 204));
    }
    .NightClass textarea{
        height: 3%;        
        width: 20%;
        color: #FCFC24;
        background-color: #363636;
    }
    .DayClass{
        /* position: fixed;会生成绝对定位的元素，该元素的位置是相对于浏览器窗口进行定位的，
        这意味着即使页面发生滚动，使用 position: fixed; 定位的元素也会始终保持在屏幕的固定位置。 */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;        
        padding: 0;        
        height: 100vh;
        background-color: rgb(252, 255, 212);
        margin-top: 0%;
        transition: background-color 2s linear;/* 添加过度效果 */
    }
    /* .fromNightToDay{
        background: linear-gradient(to right,black,rbg(252,255,212));
    } */
    .Images{
<<<<<<< HEAD
    max-width: 20%; /* 最大宽度为父元素的100% */

    height: auto; /* 自动高度，保持宽高比 */
    }   
=======
    width: 15%; /* 最大宽度为父元素的100% max-width*/
    height: 10%; /* 自动高度，保持宽高比 */
    }
    body{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0,
    }
  
>>>>>>> 7b40162a212f0daf166ce8c6b302c801ba5ee6b3
</style>